<template>
	<view class="uni-popup">
		<view class="header">
			壁纸信息
			<view class="close" @click="close">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
		</view>
		<scroll-view class="content" scroll-y>
			<view class="row">
				<view class="label">壁纸ID：</view>
				<text selectable class="value">{{info.classid}}</text>
			</view>

			<!-- <view class="row">
				<view class="label">分类：</view>
				<text class="value class">明星美女</text>
			</view> -->

			<view class="row">
				<view class="label">发布者：</view>
				<text class="value">{{info.nickname}}</text>
			</view>

			<view class="row">
				<text class="label">评分：</text>
				<view class='value rateBox'>
					<uni-rate readonly touchable :value="info.score" size="16" />
					<text class="score">5分</text>
				</view>
			</view>

			<view class="row">
				<text class="label">摘要：</text>
				<view class='value'>
					{{info.description}}
				</view>
			</view>

			<view class="row">
				<text class="label">标签：</text>
				<view class='value tags'>
					<view class="tag" v-for="tag in info.tabs" :key="tag">{{tag}}</view>
				</view>
			</view>

			<view class="copyright">
				声明：本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。
			</view>

		</scroll-view>
	</view>
</template>

<script setup>
defineProps({
	info: Object
})
const emit = defineEmits(['close'])
const close = ()=>{
	emit('close', false)
}
</script>

<style lang="scss" scoped>
.uni-popup {
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		padding:30rpx;
		.header {
			text-align: center;
			padding: 30rpx;
			.close {
				position: absolute;
				padding: 30rpx;
				right: 0;
				top: 0;
			}
		}
		.content {
			max-height: 60vh;
			.row {
				display: flex;
				padding:16rpx 0;
				font-size: 32rpx;
				line-height: 1.7em;
				.label {
					width: 140rpx;
					color:$text-font-color-3;
					text-align: end;
					font-size: 30rpx;
				}
				.value{
					flex:1;
					width:0;
				}
				.rateBox{
					display: flex;
					align-items: center;
					.score{
						font-size: 26rpx;
						color:$text-font-color-2;
						padding-left:10rpx;
					}
				}
				.tags{
					display: flex;
					flex-wrap: wrap;
					.tag{
						border: 1px solid $primary-theme-color;
						color: $primary-theme-color;
						font-size: 22rpx;
						padding: 10rpx 30rpx;
						border-radius: 40rpx;
						line-height: 1em;
						margin: 0 10rpx 10rpx 0;
					}
				}
			}
			.copyright {
				font-size: 28rpx;
				padding: 20rpx;
				background: #F6F6F6;
				color: #666;
				border-radius: 10rpx;
				margin: 20rpx 0;
				line-height: 1.6em;
			}
		}
	}
</style>